<template>
    <div class="singer-detail">
        <SingerInfo></SingerInfo>
        <div class="hot clearfix" v-show="$route.path===`/singerdetail/${$route.params.mid}`&&singerSong.total">
          <div class="title">热门歌曲</div>
          <SongList :showAlbum="true" :showSinger="false" :list="singerSong.list"></SongList>
        </div>
        <div class="hot clearfix" v-show="$route.path===`/singerdetail/${$route.params.mid}`&&singerAlbum.total">
          <div class="title">专辑</div>
          <span @click="loadingMoreAlbum" v-show="singerAlbum.total>5">全部 ></span>
          <SingerAlbum :picSize="picSize" :count="5" :list="singerAlbum.list"></SingerAlbum>
        </div>
        <div class="hot clearfix" v-show="$route.path===`/singerdetail/${$route.params.mid}`&&singerMv.total">
          <div class="title">MV</div>
          <span @click="loadingMoreMv" v-show="singerMv.total>4">全部 ></span>
          <SingerMv :list="singerMv.list"></SingerMv>
        </div>
        <div class="hot clearfix" v-show="$route.path===`/singerdetail/${$route.params.mid}`&&singerFansMv.total">
          <div class="title">粉丝上传</div>
          <SingerMv :list="singerFansMv.list"></SingerMv>
        </div>
        <div class="hot clearfix" v-show="$route.path===`/singerdetail/${$route.params.mid}`&&singerSimilar.length">
          <div class="title">相似歌手</div>
          <SingerSimilar :list="singerSimilar"></SingerSimilar>
        </div>
      <router-view/>
    </div>
</template>

<script>
    import SingerInfo from '@/components/Info/SingerInfo/SingerInfo'
    import SongList from '@/components/SongList/SongList'
    import SingerAlbum from '@/components/SingerAlbum/SingerAlbum'
    import SingerMv from '@/components/SingerMv/SingerMv'
    import SingerSimilar from '@/components/SingerSimilar/SingerSimilar'
    import {mapState} from 'vuex'
    export default {
        name: "SingerDetail",
        data(){
          return{
            picSize:300,
          }
        },
        components:{
          SingerInfo,
          SongList,
          SingerAlbum,
          SingerMv,
          SingerSimilar
        },
        methods:{
          loadingMoreAlbum(){
            this.$router.replace('/singerdetail/'+this.$route.params.mid+'/album/'+this.singerAlbum.total)
          },
          loadingMoreMv(){
            this.$router.replace('/singerdetail/'+this.$route.params.mid+'/mv/'+this.singerMv.total)
          }
        },
        computed:{
          ...mapState(['singerSong','singerAlbum','singerMv','singerFansMv','singerSimilar'])
        },
        mounted(){
          this.$store.dispatch('getSingerInfo',this.$route.params.mid)
          this.$store.dispatch('getSingerSong',{singer_mid:this.$route.params.mid,begin:0,num:10,order:'listen'})
          this.$store.dispatch('getSingerAlbum',{picSize:this.picSize,singer_mid:this.$route.params.mid,order:'listen'})
          this.$store.dispatch('getSingerAttention',this.$route.params.mid)
          this.$store.dispatch('getSingerMv',{singer_mid:this.$route.params.mid,begin:0,num:4,order:'listen'})
          this.$store.dispatch('getSingerFansMv',{singer_mid:this.$route.params.mid,begin:0,num:4,order:'time'})
          this.$store.dispatch('getSingerSimilar',{singer_mid:this.$route.params.mid,begin:0,num:5})
        }
    }
</script>

<style scoped lang="less">
.singer-detail{
  .title{
    font-size:24px;
    line-height: 2;
  }
  .hot{
    width: 1200px;
    margin: 30px auto;
    position: relative;
    >span{
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 14px;
      &:hover{
        cursor: pointer;
        color: #31c27c;
      }
    }
  }
}
</style>
